<template>
  <div class="Bussiness" style="border:white solid 0px ">
    <!--    <el-page-header @back="goBack" content="门店管理">-->
    <!--    </el-page-header>-->
    <div>
      门店名称:
      <el-input v-model="businessName" placeholder="请输入内容" style="width:150px;margin-right: 15px"></el-input>
      店长姓名:
      <el-input v-model="shopownerName" placeholder="请输入内容" style="width:150px;margin-right: 15px"></el-input>
      状态:
      <template>
        <el-select v-model="value" placeholder="请选择" width="130" style="margin-right: 15px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </template>
      起始时间:
      <el-date-picker
          v-model="start"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      结束时间:
      <el-date-picker
          v-model="end"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"

      >
      </el-date-picker>
      <el-button @click="es">搜索</el-button>
    </div>
    <div style="border:white solid 0px ">
      <el-table
          :data="tableData"
          height="250"
          border
          style="width: 100%">
        <el-table-column
            prop="name"
            label="商家名"
            width="130">
        </el-table-column>
        <el-table-column
            prop="shopowner"
            label="店长名"
            width="130">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            width="100">
        </el-table-column>
        <el-table-column
            prop="startTime"
            label="开店时间"
            width="150">
        </el-table-column>
        <el-table-column
            label="商家评分"
            width="200">
            <template slot-scope="scope">
                <el-rate
                        v-model="scope.row.score"
                        disabled
                >
                </el-rate>
            </template>
        </el-table-column>

        <el-table-column
            prop="orderMoney"
            label="接单总额">
        </el-table-column>
        <el-table-column
            prop="orderNum"
            label="接单总数">
        </el-table-column>
        <el-table-column
            prop="deal"
            label="操作">
          <template slot-scope="scope">
            <el-button @click="query(scope.row.code)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        title="门店信息"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
      <div style="width: 800px;margin-right: 200px">
        <div>
          <h3>门店基本信息</h3><br>
          门店名称：
          <span>{{ business }}</span>

          门店地址：
          <span>{{ address }}</span>

          营业时间：
          <span>{{ time }}</span><br>

          状态：
          <span>{{ status }}</span>


          营业执照：<a style="color: blue">查看 </a><a style="color: blue">删除 </a>

          店长姓名：
          <span>{{ shopowner }}</span><br>

          手机号码：
          <span>{{ phone }}</span>
          <br>
          <hr>


        </div>
        <div><h3>销售统计</h3>

          <el-date-picker
              v-model="countTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-button type="success" @click="queryOrder">查询</el-button>
          <br>
          今日单数：
          <span>{{ todayNum }}</span>
          今日金额：
          <span>{{ todayMoney }}</span>
          当月单数：
          <span>{{ monthNum }}</span>
          当月金额：
          <span>{{ monthMoney }}</span>
          <hr>
        </div>

        <div>
          <h3>订单详情</h3>
          <el-table
              :data="tableData1"
              height="250"
              border
              style="width: 100%">
            <el-table-column
                prop="number"
                label="订单编号"
                width="100">
            </el-table-column>
            <el-table-column
                prop="allMoney"
                label="订单总价"
                width="100">
            </el-table-column>
            <el-table-column
                prop="businessIncome"
                label="商家收入"
                width="100">
            </el-table-column>
            <el-table-column
                prop="finishTime"
                label="完成时间"
                width="150">
            </el-table-column>
            <el-table-column
                label="订单详情"
            >
              <template slot-scope="scope">
                <!--                            <el-button @click="query(scope.row.details)" type="text" size="small">查看</el-button>-->
                <span v-for="item in scope.row.details" :key="item">{{ item.name }}×{{ item.num }}  {{ item.price }}<br></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: 'Business',
  data() {
    return {
      tableData: [],
      tableData1: [],



      businessName: "",
      shopownerName: "",
      start: "",
      end: "",

      options: [{
        value: '营业中',
        label: '营业中'
      }, {
        value: '休息中',
        label: '休息中'
      }],
      value: "",


      dialogVisible: false,
      businessCode: "",

      business: "",
      address: "",
      time: "",
      status: "",
      shopowner: "",
      phone: "",

      countTime: "",
      todayNum: "",
      todayMoney: "",
      monthNum: "",
      monthMoney: "",

    }
  },
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.axios.get("back/business/findByItem").then(
          r => {
            this.tableData = r.data;
          }
      )
    },
    es() {
      // console.log(this.value)
      this.axios.get("back/business/findByItem", {
        params: {
          shopowner: this.shopownerName,
          name: this.businessName,
          status: this.value,
          start: this.start,
          end: this.end,

        }
      }).then(
          r => {
            this.tableData = r.data;
            this.shopownerName = "";
            this.businessName = "";
            this.value = "";
            this.start = "";
            this.end = "";
          }
      )
    },

    query(businessId) {
      this.businessCode = businessId;
      this.dialogVisible = true;
      this.queryBusiness(businessId);

    },
    queryBusiness(businessId) {
      this.axios.get("back/business/findById", {params: {id: businessId}}).then(
          r => {
            this.business = r.data.name;
            this.address = r.data.address;
            this.time = r.data.startTime;
            this.status = r.data.status;
            this.shopowner = r.data.shopowner;
            this.phone = r.data.phone;
          }
      )
    },
    queryOrder() {
      // console.log(this.businessCode);
      // console.log(this.countTime);
      this.queryOrderInfo()
      this.axios.get("back/order/orderCount", {
        params: {
          code: this.businessCode,
          time: this.countTime,
          who: "business",
        }
      }).then(
          r => {
            this.todayNum = r.data.todayNum;
            this.todayMoney = r.data.todayMoney;
            this.monthNum = r.data.monthNum;
            this.monthMoney = r.data.monthMoney;
          }
      )
    },
    queryOrderInfo() {
      console.log("!11111");
      this.axios.get("back/order/orderInfo", {
        params: {
          code: this.businessCode,
          time: this.countTime,
          who: "business",
        }
      }).then(
          r => {
            this.tableData1 = r.data;
            console.log(r.data)
          }
      )
    },
    handleClose() {
      this.dialogVisible = false;
      this.countTime = "";
      this.todayNum = "";
      this.todayMoney = "";
      this.monthNum = "";
      this.monthMoney = "";
      this.tableData1 = [];
    },


  }
}
</script>


<style scoped>
div {
  border: black solid 1px;
  margin: 2px 2px 2px 2px
}

span {
  margin-right: 5px;
  margin-top: 5px;
}
</style>